<script setup>
import { fixedPhotoes, transformParams } from '@/stores/homeData.js'
import { useRouter } from 'vue-router';

const router = useRouter()
const imgs = [];
for (let i = 0; i < 5; i++) {
  let img = `https://kanekikeh.online/A/studentWork/HomePage/FM${i + 1}.png`;
  imgs.push(img);
}

const imgIndex = ref(0);
const presentImg = ref(`https://kanekikeh.online/A/studentWork/HomePage/FM.png`)
const pokers = reactive(transformParams.map((transform, index) => ({
  transform,
  zIndex: index,
  transition: index + 1 >= transformParams.length ? "" : "transform 0.3s ease",
  imgSrc: imgs[index],
  nums: index
})));
const clickNum = ref(0)
let snackbar = ref(false)
let snackStr = ref('此区域暂无开放，可浏览小程序板块')

const move = (() => {
  pokers.forEach(poker => {
    if (poker.nums + 1 >= pokers.length) {
      poker.nums = 0
      poker.transition = ""
      poker.imgSrc = imgs[(imgIndex.value + 1) % imgs.length]
      // 面向结果解决bug
      if (clickNum.value == 0) {
        presentImg.value = fixedPhotoes[0]
      }
      if (clickNum.value == 1) {
        presentImg.value = fixedPhotoes[1]
      }
      else if (clickNum.value == 2) {
        presentImg.value = fixedPhotoes[2]
      }
      else if (clickNum.value == 3) {
        presentImg.value = fixedPhotoes[3]
      }
      else if (clickNum.value > 3) {
        presentImg.value = imgs.find(item => item == imgs[(imgIndex.value + 2) % imgs.length])
      }
    } else {
      poker.nums += 1
      poker.transition = "transform 0.3s ease"
    }
    poker.zIndex = poker.nums
    poker.transform = transformParams[poker.nums]
  });
  imgIndex.value++
  clickNum.value++
})

const clickPresentImg = ((url) => {
  if (url == 'https://kanekikeh.online/A/studentWork/HomePage/FM.png') {
    move()
  }
  else {
    if (url == 'https://kanekikeh.online/A/studentWork/HomePage/FM1.png') {
      // 跳转至影视作品
      // router.push({ path: '/completionVideo' })
      snackbar.value = true
    }
    else if (url == 'https://kanekikeh.online/A/studentWork/HomePage/FM2.png') {
      // 跳转至网站搭建
      // router.push({ path: '/completionSite' })
      snackbar.value = true
    }
    else if (url == 'https://kanekikeh.online/A/studentWork/HomePage/FM3.png') {
      // 跳转至小程序
      router.push({ path: '/miniProgram' })
    }
    else if (url == 'https://kanekikeh.online/A/studentWork/HomePage/FM4.png') {
      // 跳转至UI设计
      // router.push({ path: '/finalUI' })
      snackbar.value = true
    }
    else {
      // 跳转至毕业论文 [暂时设定跳转到404界面]
      // router.push({ path: '/completionSite' })
      snackbar.value = true
    }
  }
})

</script>

<template>
  <v-snackbar v-model="snackbar" :timeout="3000" color="primary">
    {{ snackStr }}
  </v-snackbar>

  <body>
    <div class="workLogo" />
    <div class="container">
      <div v-for="(poker, index) in pokers" :key="index" class="poker" :class="`poker${index + 1}`"
        :style="{ transform: poker.transform, zIndex: poker.zIndex, transition: poker.transition }">
        <img :src="poker.imgSrc" />
      </div>
      <div class="poker_top poker5">
        <img :src="presentImg" @click="clickPresentImg(presentImg)" />
      </div>

      <div class="arrow" @click="move">
        <img src="/src/assets/images/rightArrow.png" alt="">
      </div>
    </div>
    <!-- <footer /> -->
  </body>
</template>

<style scoped lang="scss">
div {
  user-select: none;
}

* {
  font-size: 2vmin;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;

  background-image: linear-gradient(to top, #b3cee1, #fff);
  margin-top: -30px;
}

.workLogo {
  background-image: url('https://kanekikeh.online/A/studentWork/HomePage/WORKS_LOGO.png');
  background-position: center;
  background-size: cover;
  width: 50%;
  height: 50%;
  position: relative;
  bottom: 25%;
  // z-index: 999;
}

.container {
  position: absolute;
  width: 35rem;
  height: 15rem;
  margin-bottom: 1rem;
  margin-top: 30vh;
}

.poker,
.poker_top {
  position: absolute;
  width: 15rem;
  height: 20rem;
  border: 0.15rem solid #fff;
  border-radius: 1.5rem;
  transform-origin: bottom left;
  overflow: hidden;
}

.poker img {
  position: relative;
  width: 100%;
  height: 100%;
}

.poker_top {
  background-color: #fff;
  transition: 0.3s ease;
  cursor: pointer;
  z-index: 1000;
}

.poker_top img {
  position: relative;
  width: 100%;
  height: 100%;
}


.poker_top:hover {
  background-color: #aaa;
}



.poker1 {
  transform: rotate(-10deg);
}

.poker2 {
  transform: rotate(-6deg) translate(35%, -12%);
}

.poker3 {
  transform: rotate(-2deg) translate(65%, -19%);
}

.poker4 {
  transform: rotate(2deg) translate(95%, -26%);
}

.poker5 {
  transform: rotate(6deg) translate(125%, -23%);
}

.arrow {
  // background-color: #69bde8;
  border: 1px solid black;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 105%;
  top: 40%;
  cursor: pointer;

  & img {
    width: 100%;
    height: 100%;
  }
}

footer {
  position: absolute;
  width: 100vw;
  height: 25%;
  bottom: 0%;
  right: 1%;
  background-image: url('/src/assets/images/allin.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
</style>
